<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="发布">
			<view slot='right' style="padding-right: 28rpx;">
				<view class="btn-ok" :class="{act:content}" @click="subPost">
					完成
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="content-box">
				<textarea placeholder="说点什么吧…" v-model="content" />
			</view>
			<view class="pic">
				<image v-if="imgList.length" v-for="(img,imgx) in imgList" :key='imgx'
					:src="'https://api.loveworldzh.com/'+img" mode=""
					@click="preImage('https://api.loveworldzh.com/'+img)"></image>
				<video :src="videoSrc" controls v-if='videoSrc'></video>
				<view class="addpic" @click="showPop =true">
					<u-icon name="plus" color="#333333" size="44"></u-icon>
				</view>
			</view>
			<view class="limit" @click="showLimit=true">
				<view class="left">
					<image src="../../../static/imgs/quanxiantb.png" mode=""></image>
					<text>谁可以看</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-popup v-model="showLimit" border-radius="16" mode="bottom">
			<view class="limitBox">
				<view class="title">
					谁可以看
				</view>
				<view class="limit-li" @click="choose(0)">
					<view class="left">
						<text class="type">公开</text>
						<text class="tip">所有人可见</text>
					</view>
					<view class="right" v-if="chooseCur==0">
						<u-icon name="checkmark" color="#2979ff" size="32"></u-icon>
					</view>
				</view>
				<view class="limit-li" @click="choose(1)">
					<view class="left">
						<text class="type">隐私</text>
						<text class="tip">仅好友可见</text>
					</view>
					<view class="right" v-if="chooseCur==1">
						<u-icon name="checkmark" color="#2979ff" size="32"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showPop" mode="bottom" :mask-close-able='false'>
			<view class="popBox">
				<view class="topBtn">
					<view class="btn" @click="chosseImg">
						照片
					</view>
					<view class="btn" @click="chosseVideo">
						视频
					</view>
				</view>
				<view class="botBtn" @click="showPop =false">
					取消
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				showPop: false,
				showLimit: false,
				chooseCur: 0,
				content: '', //内容
				imgList: [],
				videoSrc: '',
				videoPath: ''
			}
		},
		methods: {
			// 发帖子
			async subPost() {
				let {
					content,
					imgList,
					videoPath
				} = this
				if (!content) {
					uni.showToast({
						title: '说点什么吧',
						icon: 'none'
					})
					return
				}
				if (imgList.length == 0 && !videoPath) {
					uni.showToast({
						title: '请至少添加一张图片或视频',
						icon: 'none'
					})
					return
				}
				let pathId

				let path = ''
				imgList.forEach(item => {
					path += item + ','
				})
				if (path) {
					pathId = path.substring(0, path.lastIndexOf(','))
				} else {
					pathId = videoPath
				}
				let res = await myRequest.addForum({
					content: content,
					category_type: '1',
					type: '0',
					path: pathId
				})
				if (res.status) {
					uni.showToast({
						title: res.msg
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/community/community'
						})
					}, 1000)
				}
			},
			// 图片预览
			preImage(url) {
				uni.previewImage({
					urls: [url],
				});
			},
			chosseImg() {
				let that = this
				if (that.videoPath) {
					uni.showToast({
						title: '您已添加视频了',
						icon: 'none'
					})
					return
				}
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						that.showPop = false
						that.uploadImg(res.tempFilePaths)
					}
				});
			},
			// 上传图片
			uploadImg(imgFiles) {
				let that = this
				imgFiles.forEach(itemFiles => {
					uni.uploadFile({
						url: that.$baseURL + 'upload/up',
						filePath: itemFiles,
						name: 'file',
						// formData:{
						// 	token:uni.getStorageSync('token')
						// },
						success: (uploadFileRes) => {
							let obj = JSON.parse(uploadFileRes.data)
							if (obj.status) {
								if (that.imgList.length > 8) {
									uni.showToast({
										title: '最多上传9张图片',
										icon: 'none'
									})
									return
								} else {
									that.imgList.push(obj.path)
								}
							}
						}
					});
				})
			},
			// 上传视频
			uploadVideo(videoFile) {
				let that = this
				uni.uploadFile({
					url: that.$baseURL + 'upload/video',
					filePath: videoFile,
					name: 'file',
					// formData:{
					// 	token:uni.getStorageSync('token')
					// },
					success: (uploadFileRes) => {
						let obj = JSON.parse(uploadFileRes.data)
						if (obj.status) {
							this.videoSrc = obj.video
							this.videoPath = obj.path
						}
					}
				});
			},

			chosseVideo() {
				if (this.imgList.length) {
					uni.showToast({
						title: '您已添加图片了',
						icon: 'none'
					})
					return
				}
				if (this.videoPath) {
					uni.showToast({
						title: '只能上传一个视频',
						icon: 'none'
					})
					return
				}
				let that = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					compressed: true,
					maxDuration: 15,
					success: function(res) {
						that.showPop = false
						that.videoPath = res.tempFilePath
						that.uploadVideo(res.tempFilePath)
					}
				});
			},
			choose(index) {
				this.chooseCur = index
			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.btn-ok {
		width: 112rpx;
		height: 60rpx;
		background: #7FAEFF;
		border-radius: 8rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		font-family: Segoe UI;
		font-weight: 400;
		color: #FFFFFF;
	}

	.act {
		background: #3587F7;
	}

	.content {
		padding: 20rpx;

		.content-box {
			width: 100%;
			height: 200rpx;

			textarea {
				width: 100%;
				height: 100%;
			}
		}

		.pic {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.addpic {
				width: 220rpx;
				height: 220rpx;
				background: #F2F2F7;
				border-radius: 6rpx;
				text-align: center;
				line-height: 220rpx;
			}

			image {
				width: 220rpx;
				height: 220rpx;
				margin-right: 20rpx;
				margin-bottom: 10rpx;

				&:nth-child(3n) {
					margin-right: 0rpx;
				}
			}

			video {
				width: 220rpx;
				height: 220rpx;
				margin-right: 20rpx;
			}
		}

		.limit {
			margin-top: 96rpx;
			width: 100%;
			height: 114rpx;
			border-top: 2rpx solid #F2F2F7;
			border-bottom: 2rpx solid #F2F2F7;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.limitBox {
		padding: 0 20rpx 32rpx;
		background-color: #FFFFFF;

		.title {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}

		.limit-li {
			width: 100%;
			height: 120rpx;
			border-bottom: 2rpx solid #F2F2F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx;

			.left {
				display: flex;
				flex-direction: column;

				.type {
					font-size: 34rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.tip {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}

	.popBox {
		padding: 0 28rpx;

		.topBtn {
			width: 694rpx;
			height: 176rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 10rpx;

			.btn {
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
			}

			.btn:last-child {
				border-top: 2rpx solid #F2F2F7;
			}
		}

		.botBtn {
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 32rpx;
			margin-top: 48rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}
	}

	/deep/ .u-drawer-content {
		background-color: rgba(255, 255, 255, 0);
	}
</style>
